<template>
	<view class="content">
		<view class="status">
		</view>
		<!-- #ifdef APP-PLUS -->
		<view class="tab" :style="spaceBetween">
			<view style="width: 40%;height: 75upx;">
				<quanTab :initIndex="initIndex" :modelData="modelData" @change="tapChange">

				</quanTab>
			</view>
			<view class="icons">
				<image src="../../static/images/search.png" mode="" @tap="go_search()"></image>
				<image style="margin-left: 60upx;" src="../../static/images/edit.png" @tap="add" mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="tab">
			<view style="width: 40%;height: 75upx;">
				<quanTab :initIndex="initIndex" :modelData="modelData" @change="tapChange">

				</quanTab>
			</view>
			<view class="icons">
				<image src="../../static/images/search.png" mode="" @tap="go_search()"></image>
				<image style="margin-left: 60upx;" src="../../static/images/edit.png" @tap="add" mode=""></image>
			</view>
		</view>
		<!-- #endif -->
		<!-- #ifdef APP-PLUS -->
		<view class="quans" :style="top">
			<!-- #endif -->
			<!-- #ifdef MP-WEIXIN -->
			<view class="quans">
				<!-- #endif -->
				<view class="quan" v-for="(item,index) in all" :key="index" @tap="go_detail(item.id)">
					<view class="top">
						<image :src="getRealPath(item.imgUrl)" mode="" @tap.stop="go_userinfo(item.userId)"></image>
						<view>
							<text class="nickName" @tap.stop="go_userinfo(item.userId)">{{item.nickName}}</text>
							<text class="time">{{timeAgo(item.createTime)}}</text>
						</view>
					</view>
					<view class="detail">
						<text>{{item.quanDesc}}</text>
						<view class="img" v-if="item.quanImgUrl.length!=0">
							<image class="dimage" @tap.stop="prevImg(item.quanImgUrl)" :src="getRealPath(item.quanImgUrl)" alt="" mode="aspectFill"></image>
						</view>
						<view class="duotu" v-if="item.images.length!=0">
							<view v-for="(it,i) in item.images" :key="i">
								<image @tap.stop="prevMoreImg(item.images,i)" :src="getRealPath(it.imgUrl)" mode="aspectFill"></image>
							</view>
						</view>
					</view>
					<view class="pinglun">
						<view>
							<image src="../../static/images/comment.png" mode=""></image> <text v-if="item.comments!=0">{{item.comments}}</text><text
							 v-if="item.comments==0">评论</text>
						</view>
						<view>
							<image src="../../static/images/dianzan.png" mode=""></image><text v-if="item.stars!=0">{{item.stars}}</text><text
							 v-if="item.stars==0">点赞</text>
						</view>
					</view>
				</view>
			</view>
			<view v-if="content.length!=0" style="margin-bottom: 20upx;height: 80upx; font-size: 28upx;color: #999999;text-align: center; line-height: 80upx;width: 92;">{{content}}</view>
		</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import utils from "../../static/js/utils.js";
	import quanTab from "../../components/myTabs/quan-tab.vue"
	const device = uni.getSystemInfoSync();
	const top = device.statusBarHeight + uni.upx2px(90);
	export default {
		components: {
			quanTab
		},
		computed: {
			...mapState(['quanChange']),
			top() {
				return "margin-top:" + top + "px";
			},
			spaceBetween() {
				return "justify-content:space-between;"
			}
		},
		onLoad() {
			this.getAllQuan(0, 0);
		},
		onShow() {
			if (this.quanChange) {

				this.getAllQuan(0, 0);
			}
		},
		data() {
			return {
				content: '',
				initIndex: 0,
				tabStatus: true,
				modelData: [{
						label: "交大圈子"
					}

				],
				all: [],
				pageId: 0
			};
		},
		onReachBottom() {
			if (this.content != "已经到底了") {
				let pId = this.pageId;
				this.getAllQuan(pId + 1, 1);
			}

		},
		onPullDownRefresh() {
			this.getAllQuan(0, 0);
		},
		onTabItemTap() {
			uni.startPullDownRefresh({

			});
			uni.pageScrollTo({
				scrollTop: 0,
				duration: 300
			});
			uni.hideTabBarRedDot({
				index:1
			});
		},
		methods: {
			...mapMutations(['setQuanChange']),
			go_detail(id) {
				uni.navigateTo({
					url: 'detail?quanId=' + id
				});
			},
			go_search(){
				uni.navigateTo({
					url: 'search'
				});
			},
			prevMoreImg(images, index) {
				let imgs = [];
				images.forEach((item) => {
					imgs.push(utils.baseImgUrl + item.imgUrl);
				});
				uni.previewImage({
					urls: imgs,
					current: imgs[index]
				})
			},
			getAllQuan(pageId, type) {
				utils.loading("加载中...");
				let that = this;
				utils.get("quan/index", {
					pageId
				}, function(data) {
					if (type == 0) {
						that.content = "";
						that.all = data;
						that.setQuanChange({
							quanChange: false
						});
						uni.stopPullDownRefresh();
					} else {
						if (data.length == 0) {
							that.content = "已经到底了"
						} else {
							that.all.push.apply(that.all, data);
							that.pageId++;
						}

					}
				});
			},
			add() {
				uni.navigateTo({
					url: 'addquan',
					animationType: "slide-in-bottom"
				});
			},
			go_userinfo(userId) {
				uni.navigateTo({
					url: '../usercenter/userinfo?userId=' + userId
				});
			},
			prevImg(imgUrl) {
				uni.previewImage({
					urls: [this.getRealPath(imgUrl)]
				})
			},
			getRealPath(path) {
				return utils.baseImgUrl + path;
			},
			tapChange(val) {

			},
			timeAgo(dateTimeStamp) {
				var minute = 1000 * 60; //把分，时，天，周，半个月，一个月用毫秒表示
				var hour = minute * 60;
				var day = hour * 24;
				var week = day * 7;
				var halfamonth = day * 15;
				var month = day * 30;
				var now = new Date().getTime(); //获取当前时间毫秒
				var diffValue = now - dateTimeStamp; //时间差

				if (diffValue < 0) {
					return;
				}
				var result = "";
				var minC = diffValue / minute; //计算时间差的分，时，天，周，月
				var hourC = diffValue / hour;
				var dayC = diffValue / day;
				var weekC = diffValue / week;
				var monthC = diffValue / month;
				if (monthC >= 1 && monthC <= 3) {
					result = " " + parseInt(monthC) + "月前"
				} else if (weekC >= 1 && weekC <= 3) {
					result = " " + parseInt(weekC) + "周前"
				} else if (dayC >= 1 && dayC <= 6) {
					result = " " + parseInt(dayC) + "天前"
				} else if (hourC >= 1 && hourC <= 23) {
					result = " " + parseInt(hourC) + "小时前"
				} else if (minC >= 1 && minC <= 59) {
					result = " " + parseInt(minC) + "分钟前"
				} else if (diffValue >= 0 && diffValue <= minute) {
					result = "刚刚"
				} else {
					var datetime = new Date();
					datetime.setTime(dateTimeStamp);
					var Nyear = datetime.getFullYear();
					var Nmonth = datetime.getMonth() + 1 < 10 ? "0" + (datetime.getMonth() + 1) : datetime.getMonth() + 1;
					var Ndate = datetime.getDate() < 10 ? "0" + datetime.getDate() : datetime.getDate();
					var Nhour = datetime.getHours() < 10 ? "0" + datetime.getHours() : datetime.getHours();
					var Nminute = datetime.getMinutes() < 10 ? "0" + datetime.getMinutes() : datetime.getMinutes();
					var Nsecond = datetime.getSeconds() < 10 ? "0" + datetime.getSeconds() : datetime.getSeconds();
					result = Nyear + "-" + Nmonth + "-" + Ndate
				}
				return result;
			}
		}
	}
</script>

<style>
	page {
		background-color: #f4f4f4;
	}

	.content {
		display: flex;
		flex-direction: column;
		width: 100%;

	}

	quanTab {
		/* width: 40% */
	}

	.status {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: var(--status-bar-height);
		background-color: #ffffff;
	}

	swiper {
		width: 100%;
		height: 1000upx;
	}

	.tab {
		position: fixed;
		top: var(--status-bar-height);
		display: flex;
		flex-direction: row;
		width: 100%;
		height: 90upx;
		z-index: 999;
		box-shadow: inset 0px -1px 1px -1px #dcdcdc;
		background-color: #ffffff;
		align-items: center;
	}

	.quans {
		display: flex;
		width: 100%;
		margin-top: 140upx;
		flex-direction: column;
	}

	.quan {
		width: 100%;
		background-color: #ffffff;
		margin-bottom: 20upx;
		display: flex;
		align-items: center;
		/* justify-content: center; */
		flex-direction: column;
	}

	.top {
		width: 92%;
		height: 60upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 25upx;

	}

	.top image {
		height: 60upx;
		width: 60upx;
		border-radius: 60upx;
	}

	.top view {
		height: 60upx;
		margin-left: 20upx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.detail {
		width: 90%;
		margin-top: 15upx;
	}

	.detail text {
		font-size: 28upx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	.img {
		width: 98%;
		height: 360upx;
		margin-top: 10upx;
	}

	.detail .dimage {
		width: 100%;
		height: 360upx;
		border-radius: 6upx;
	}

	.duotu {
		width: 100%;
		height: 215upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 10upx;
	}

	.duotu view {
		width: 33%;
		height: 215upx;

	}

	.duotu image {
		width: 210upx;
		height: 210upx;
	}

	.pinglun {
		width: 92%;
		height: 70upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin-top: 15upx;
	}

	.pinglun view {
		width: 50%;
		text-align: center;
		height: 45upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;

	}

	.pinglun view image {
		height: 30upx;
		width: 30upx;
	}

	.pinglun view text {
		font-size: 22upx;
		margin-left: 10upx;
	}

	.nickName {
		font-size: 24upx;
	}

	.time {
		font-size: 22upx;
		color: #999999;
	}

	.icons {
		width: 200upx;
		height: 75upx;
		display: flex;
		flex-direction: row;
		align-items: center;
		/* margin-left: 40upx; */
	}

	.icons image {
		width: 46upx;
		height: 46upx;
	}
</style>
